<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Eric Zhang</title>
	<link rel="stylesheet" href="plugin/css/swiper.min.css" />
	<link rel="stylesheet" href="../../../css/m/base.css" />
	<link rel="stylesheet" href="../../../css/m/player.css" />
	<link rel="stylesheet" href="ericZhang.css" />
</head>

<body>
<div class="swiper-container">
	<!--logo-->
	<div class="logo pf clearfix">
		<img src="logo.png" class="resize fl" style="width: 30px;"/>
		<span class="slogen fl">深夜研习社</span>
	</div>
	<div class="swiper-wrapper">
		<!--section1-->
		<section class="swiper-slide">
			<img class="pa db" src="p1-1.png" style="width: 280px;top: 40px;left:20px;z-index: 2;" alt="" />
			<div class="player pa db" style="width: 270px;top: 115px;left: 25px;z-index: 2;">
				<div id="t-video" class="video usn " style="position:relative;width:100%;height:100%;left:0;top:0;box-sizing:border-box;">
			        <video id="playVideo" style="display: block; width: 100%; height: 100%;box-sizing:inherit;" src="blackPanther.mp4" poster="https://wx4.sinaimg.cn/crop.0.0.585.329.1000/006Tr4asly1fnyqrpm47og30ga095myx.gif"></video>
			        <div class="sewise-player-ui usn">
			            <div class="controlbar transition">
			                <div class="controlbar-bg">控制栏背景</div>
			                <div class="controlbar-btns">
			                    <div class="controlbar-btn controlbar-div-play">
			                        <a href="javascript:;" class="controlbar-btns-play" tabindex="1">播放</a>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-pause">
			                        <a href="javascript:;" class="controlbar-btns-pause" tabindex="2">暂停</a>
			                    </div>
			                    <div class="controlbar-btn controlbar-progress">
			                        <div class="progressBox">
			                            <div class="controlbar-progress-totalline br5"></div>
			                            <div class="controlbar-progress-loadedline br5 transition" style="width: 60.391352%;"></div>
			                            <div class="controlbar-progress-playedline br5 transition" style="width: 15.0466252%;">
			                                <div class="controlbar-progress-playpoint transition br50"></div>
			                            </div>
			                            <div class="controlbar-progress-seekline"></div>
			                            <div class="controlbar-progress-tip" current-time="" style="left: 20%;"><span>30:00</span></div>
			                        </div>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-time">
			                        <div class="controlbar-playtime">
			                            00:04
			                        </div>
			                        <div class="controlbar-playtime-split">
			                            /
			                        </div>
			                        <div class="controlbar-totaltime">
			                            155:11
			                        </div>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-volume pr">
			                        <div class="controlbar-div-volumeline pa">
			                            <div class="controlbar-volumeline br5 pa">
			                                <div class="controlbar-volumeline-bg br5">
			                                </div>
			                                <div class="controlbar-volumeline-volume transition br5 pa" style="height:48px;">
			                                </div>
			                                <div class="controlbar-volumeline-dragger">
			                                </div>
			                                <div class="controlbar-volumeline-point br50 pa">
			                                </div>
			                            </div>
			                        </div>
			                        <div class="controlbar-div-soundclose volume" style="display: none;">
			                            <a href="javascript:;" class="controlbar-btns-soundclose" tabindex="1"></a>
			                        </div>
			                        <div class="controlbar-div-soundopen volume" style="display: block;">
			                            <a href="javascript:;" class="controlbar-btns-soundopen" tabindex="1"></a>
			                        </div>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-barrage dn">
			                        <a href="javascript:;" class="controlbar-btns-barrage close" tabindex="1"></a>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-palyRate dn pr">
			                        <div class="controlbar-btns-menu br5" role="presentation">
			                            <ul class="controlbar-btns-palyRate-content" role="menu">
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">4.0x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">3.0x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">2.0x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">1.75x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">1.5x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item" tabindex="-1" role="palyRateItem" aria-live="polite">1.25x<span class="vjs-control-text"></span></li>
			                                <li class="controlbar-btns-palyRate-item active" tabindex="-1" role="palyRateItem" aria-live="polite">1.0x<span class="vjs-control-text"></span></li>
			                            </ul>
			                        </div>
			                        <div class="controlbar-btns-palyRate br5">1.0x</div>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-resolution dn pr">
			                        <div class="controlbar-btns-menu br5">
			                            <ul class="controlbar-btns-resolution-content">
			                                <li class="controlbar-btns-resolution-item">超清</li>
			                                <li class="controlbar-btns-resolution-item active">高清</li>
			                                <li class="controlbar-btns-resolution-item">普清</li>
			                                <li class="controlbar-btns-resolution-item">自动</li>
			                            </ul>
			                        </div>
			                        <div class="controlbar-btns-resolution br5">高清</div>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-fullscreen">
			                        <a href="javascript:;" class="controlbar-btns-fullscreen" tabindex="1"></a>
			                    </div>
			                    <div class="controlbar-btn controlbar-div-normalscreen" style="display: none;">
			                        <a href="javascript:;" class="controlbar-btns-normalscreen" tabindex="1"></a>
			                    </div>
			                </div>
			            </div>
			            <div class="logo" style="display: none;">
			                <a href="http://www.shenyecg.com/" target="_blank" class="logo-icon" tabindex="1" style="background: url('') 0px 0px no-repeat;">logo</a>
			            </div>
			            <div class="topbar" style="display: none;">
			                <div class="topbar-program">
			                    <div class="topbar-program-tip">正在播放：</div>
			                    <div class="topbar-program-title"></div>
			                </div>
			                <div class="topbar-clock">2018-1-30 14:19:57</div>
			            </div>
			            <div class="buffer" style="display: none;">
                <div class="buffer-bg">
                    	背景图片
                </div>
                <div class="buffer-text">
                    <div class="buffer-text-tip">
                    </div>
                    <div class="buffer-text-bufferPt">
                        ...
                    </div>
                </div>
			            </div>
			            <div class="big-play-btn br50">
			                <a href="javascript:;" class="big-play-icon pause" tabindex="1"><i class="fa fa-play"></i></a>
			                <a href="javascript:;" class="big-play-icon replay" tabindex="1"><i class="fa fa-rotate-left"></i></a>
			            </div>
			            <div class="clarity-switch-btn" style="top: 0; margin-top: -5px;display: none;">
			                <a href="javascript:;" class="clarity-btn-text" tabindex="1">自动</a>
			            </div>
			            <div class="danmaku state-pause" id="danmu"></div>
			        </div>
			    </div>
			</div>
			<img class="pa db" src="p1-2.png" style="width: 60px;top: 275px;left: 0;z-index: 2;" alt="" />
			<img class="pa db" src="p1-3.png" style="width: 60px;top: 275px;right: 0;z-index: 2;" alt="" />
			<img class="pa db" src="p1-4.png" style="width: 150px;bottom: 20px; left:85px;z-index: 2;" alt="" />
		</section>
		<!--section2-->
		<section class="swiper-slide">
			<img class="pa db" src="p2-1.png" style="width: 240px;top: 40px;left: 40px;z-index: 2;" alt="" />
			<img class="pa db" src="p2-2.png" style="width: 260px;bottom: 18px;left:30px;z-index: 2;" alt="" />
		</section>
		<!--section3-->
		<section class="swiper-slide">
			<img class="pa db" src="p3-1.png" style="width: 250px;top: 45px;left: 35px;z-index: 2;" alt="" />
			<img class="pa db" src="p3-2.png" style="width: 250px;top: 210px;left: 35px;z-index: 2;" alt="" />
			<img class="pa db" src="p3-3.png" style="width: 140px;bottom: 25px;left: 90px;z-index: 2;" alt="" />
		</section>
	</div>
</div>

<script src="../../../js/m/fontSize.js"></script>
<script src="plugin/js/swiper.min.js"></script>
<script>  
	scaleW=window.innerWidth/320;
	scaleH=window.innerHeight/480;
	var resizes = document.querySelectorAll('.db');
        for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
        }
	  
  	var mySwiper = new Swiper ('.swiper-container', {
	   	direction : 'vertical',
	   	mousewheelControl : true	  
	})         
</script>
</body>
</html>
